<template>
  <div class="contonter">
    <Header @userTask="userTask"/>
    <List @delToDoListItemById='delToDoListItemById' @changeCheckedToDoItem='changeCheckedToDoItem'/>
    <Footer @delAllDoneTask='delAllDoneTask' @checkedAllToDoList='checkedAllToDoList'/>
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import Header from '@/components/header'
import List from '@/components/list'
import Footer from '@/components/footer'

export default {
    components:{
      Header,
      List,
      Footer
    },
    setup() {
       let userTaskItem=ref([])

       /* 添加任务 */
       function userTask(userTask){
            userTaskItem.value.unshift({
                id:userTaskItem.value.length+1,
                value:userTask.value,
                done:false
            })   
        }     

        /* 删除当前任务 */
        function delToDoListItemById(id){
            userTaskItem.value=userTaskItem.value.filter(v=>v.id!==id)
        }    

        /* 改变当前任务选中状态 */
        function changeCheckedToDoItem(id){ 
            userTaskItem.value.forEach(v=>{
                if (v.id===id) {
                    v.done=!v.done
                }
            }) 
        } 

        /* 清除所有已完成的任务 */
        function delAllDoneTask(){
            userTaskItem.value=userTaskItem.value.filter(v=>v.done===false)
        }

        /* 全选 */ 
        function checkedAllToDoList(done){
            userTaskItem.value.filter(v=>v.done = done)
        }


        provide('userTaskItem',userTaskItem)

        return{
            userTask,
            delToDoListItemById,
            changeCheckedToDoItem,
            delAllDoneTask,
            checkedAllToDoList            
        }
    }
}
</script>

<style  scoped>
.contonter{
    overflow: hidden;
    width: 1200px;       
    margin: 10px auto; 
    border: 2px solid #E2E2E2;  
    box-sizing: border-box;  
    border-radius: 10px;
    padding: 20px;
}
</style>>